<template>
  <div class="home">
    <div class="container" v-if="unlocking('0108000000')">
      <!--案场首页待办-->
      <home-task
        ref="homeTask"
        v-if="unlocking('0108080000') || unlocking('0108090000') || unlocking('0108100000')"></home-task>
      <!--广告位-->
      <adv-page ref="advPage" :orgId="needOrgId" v-if="unlocking('0108110000')"></adv-page>
      <!--顶部条件-->
      <div class="flex flex-horizontal-between tab-top">
        <date-search @oncheckDate="dateChooseClick" ref="dateSearch"></date-search>
        <!--顾问积分信息-->
        <div class="flex flex-vertical-center integral-content">
          <!-- <div class="integral-title">顾问积分信息</div> -->
          <!-- <DatePicker
            type="daterange"
            class="statistics-time"
            :transfer="true"
            :clearable="true"
            @on-change="exlBoxTimeChange"
            ref="conselect"
            placeholder="请选择时间"></DatePicker>
          <Button type="primary" style="margin-left: 10px" @click="exlBoxImport">积分导出</Button>
          <Button type="primary" style="margin-left: 10px" @click="exlScanCodeImport">扫码率导出</Button> -->
          <div>
            <Button type="primary" style="margin-left: 10px" @click="onAuthTT">抖音授权</Button>
            <Button type="primary" style="margin-left: 10px" @click="exlScanCodeImport">扫码率导出</Button>
            <Button
              type="primary"
              style="margin-left: 10px"
              @click="toDailyPaper"
              v-if="unlocking('0108010000')">
              案场日报
            </Button>
            <Button type="primary" style="margin-left: 10px">
              <a
                href="https://images.tospurfang.com/doc/%E9%A6%96%E9%A1%B5%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
                style="color: #fff"
                target="_blank">
                查看操作指引
              </a>
            </Button>
          </div>
        </div>
      </div>
      <div class="case-warp">
        <div class="case-content">
          <!-- 案场日报 -->
          <div class="daily_btn">
            <div class="dailyDate">{{ dateFormat }}</div>

            <div :class="['caseLevel', `caseLevel${grade == '暂无' ? 'W' : grade}`]">
              <!-- <div class="caseLevel caseLevelB"> -->
              <div class="levelSer" @click="goRateDetails(grade)">查看评级报告</div>
              <div class="caseLevelBg"></div>
            </div>
          </div>
          <!-- 案场目标 -->
          <div class="goal" v-if="unlocking('0108130000')">
            <case-goal ref="caseGoal"></case-goal>
          </div>
          <!--案场概况-->
          <div class="case-survey">
            <div class="flex survey-content flex-horizontal-between">
              <!--来人统计-->
              <visitor-page ref="visitorPage" v-if="unlocking('0108020000')"></visitor-page>
              <!--线索统计-->
              <clue-page ref="cluePage" v-if="unlocking('0108030000')"></clue-page>
            </div>
          </div>
          <!-- 渠道统计 销控统计 -->
          <div class="case-survey">
            <div class="flex survey-content flex-horizontal-between">
              <!-- 渠道统计 -->
              <channel-statistics ref="channelStatistics" v-if="unlocking('0108040000')" />
              <!-- 销控统计 -->
              <control-statistics ref="controlStatistics" v-if="unlocking('0108050000')" />
            </div>
          </div>
          <!--销售统计-->
          <sale-statistics ref="saleStatistics" v-if="unlocking('0108060000')"></sale-statistics>
          <!--SOP-->
          <div class="sop-task" v-if="unlocking('0108070000')">
            <p class="title">SOP任务执行情况统计</p>
            <Tabs v-model="showTab" :animated="false" class="sop-tab">
              <TabPane label="任务执行" name="taskPage">
                <div class="tips" v-if="taskTotal > 0">
                  <p>
                    <Icon
                      type="md-alert"
                      :size="16"
                      color="#FAAD14"
                      style="line-height: 26px; margin-left: 10px" />
                    今日还有{{ taskTotal }}人未完成任务，请及时提醒以免扣分
                  </p>
                </div>
                <dt-grid ref="table" :columns="columns" page :onFetch="onFetch" :height="300" />
              </TabPane>
              <TabPane label="成员积分" name="integralPage">
                <integral-page ref="integralPage" v-if="showTab == 'integralPage'"></integral-page>
              </TabPane>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!unlocking('0108000000')" class="position-relative">
      <img
        class="home-img position-absolute"
        src="https://images.tospurfang.com/862419AB1E47441FB2487629D3871A89-6-2.jpg"
        alt="" />
    </div>
    <Modal
      v-model="exlScanCodeImportModal"
      title="扫码率导出"
      @on-ok="exlScanCodeImportOk"
      @on-cancel="exlScanCodeImportCancel"
      ok-text="导出">
      <div class="moText" style="margin: 20px 0">
        导出时间范围：
        <DatePicker
          type="daterange"
          v-model="countDate"
          format="yyyy-MM-dd"
          placeholder="请选择导出时间"
          @on-change="DatePickTimeChange"
          style="width: 200px; margin: 0 auto" />
      </div>
      <div class="pick"></div>
    </Modal>
    <!--积分明细-->
    <integral-detail-show ref="integralDetailShow"></integral-detail-show>
    <auth-t-t ref="authTT"></auth-t-t>
  </div>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  import { linkPage } from '@/biz/buildingHome/linkPage'
  import taskPage from './taskPage.vue'
  import integralPage from './integralPage.vue'
  import toolApi from '@/biz/base/tool'
  import channelMgr from '@/biz/channel/channel'
  import taskColumn from './taskColumn'
  import integralDetailShow from './integralDetailShow.vue'
  import integralMgr from '@/biz/buildingHome/integral'
  import channelStatistics from './channelStatistics.vue'
  import controlStatistics from './controlStatistics.vue'
  import moment from 'moment'
  import saleStatistics from './saleStatistics.vue'
  import dt from '@dt/dt'
  import homeTask from './homeTask.vue'
  import advPage from './advPage.vue'
  import visitorPage from './visitorPage.vue'
  import caseGoal from './caseGoal.vue'
  import cluePage from './cluePage.vue'
  import dateSearch from './dateSearch.vue'
  import dailyApi from '@/biz/buildingHome/daily'
  import authTT from './components/authTT'
  import caseRateMgr from '@/biz/caseRate/caseRate'
  export default {
    mixins: [linkPage],
    data() {
      return {
        needOrgId: this.$dt.buildInfo().orgId,
        showTab: 'taskPage',
        checkIndex: 1,
        chooseTime: {},
        dataText: '今日',
        exlBoxTime: [],
        columns: [],
        taskTotal: 0,
        grade: [],
        countDate: null,
        exlScanCodeImportModal: false
      }
    },
    components: {
      taskPage,
      integralPage,
      integralDetailShow,
      channelStatistics,
      controlStatistics,
      saleStatistics,
      homeTask,
      advPage,
      visitorPage,
      caseGoal,
      cluePage,
      dateSearch,
      authTT
    },
    computed: {
      dateFormat() {
        let date = ''
        if (this.chooseTime.startTime == this.chooseTime.endTime) {
          date = moment(this.chooseTime.startTime).format('YYYY-MM-DD')
        } else {
          date = `${moment(this.chooseTime.startTime).format('YYYY-MM-DD')} 至 ${moment(
            this.chooseTime.endTime
          ).format('YYYY-MM-DD')}`
        }
        return date
      }
    },
    activated() {
      this.homeDataInit()
    },
    watch: {
      $route(to, from) {
        if (from.name == 'crimeSceneList') {
          // 默认选中当天
          this.$refs.dateSearch && this.$refs.dateSearch.initDateFun(1)
          this.$refs.conselect && this.$refs.conselect.handleClear()
          this.exlBoxTime = []
          this.showTab = 'taskPage'
          this.$refs.table && this.$refs.table.init(this)
          this.$refs.table && this.$refs.table.fetch()
        }
      }
    },
    methods: {
      exlScanCodeImportOk() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          userId: this.$dt.userInfo().userId,
          startTime: this.countDate[0],
          endTime: this.countDate[1]
        }
        homeMgr
          .downLoadScanCode(params)
          .then((res) => {
            this.countDate = null
          })
          .catch((err) => {})
      },
      exlScanCodeImportCancel() {
        this.countDate = null
      },
      DatePickTimeChange(val) {
        this.countDate = val
        console.log(val, this.countDate, '111ccc')
      },

      goRateDetails(val) {
        this.$router.push({
          path: '/buildingHome/caseRateHomeDetails',
          query: {
            buildingId: this.$dt.buildInfo().housesId
          }
        })
      },
      listGrade() {
        let params = {
          buildingIds: [this.$dt.buildInfo().housesId],
          // countYm: `${new Date().getFullYear()}${ new Date().getMonth() < 10 ? '0' + new Date().getMonth()+1 : new Date().getMonth() < 10 }`
          countYm: `${new Date().getFullYear()}${(new Date().getMonth() + 1).toString().padStart(2, '0')}`
        }
        caseRateMgr
          .listGrade(params)
          .then((res) => {
            this.grade = res[0].grade
          })
          .catch((err) => {})
      },
      toDailyPaper() {
        this.$router.push({
          name: 'dailyPaper'
        })
      },
      onFetch() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          queryType: 1,
          date: this.$tool.formatDate(new Date()),
          checkIndex: 0
        }
        return integralMgr
          .getTaskList(params)
          .then((res) => {
            if (res) {
              this.taskTotal = res.total
              return {
                total: res.total,
                list: res.records
              }
            } else {
              this.taskTotal = 0
              return {
                total: 0,
                list: []
              }
            }
          })
          .catch((err) => {})
      },
      onDetail(row) {
        let paramsMsg = {
          ...row,
          buildingId: row.buildingId,
          checkIndex: 0,
          sellFlag: false,
          date: moment().format('yyyy-MM-DD')
        }
        this.$refs.integralDetailShow.show(paramsMsg)
      },
      exlBoxTimeChange(val) {
        val = this.$dt.tool.handleDateRange(val)
        this.exlBoxTime = val[0] == '' || val[1] == '' ? [] : val
      },

      exlBoxImport() {
        if (!this.exlBoxTime.length) {
          this.$Message.warning('请先选择时间！')
          return false
        }

        toolApi.downloadCenter(
          `/dt-customer/statistics/web/export?startTime=${this.exlBoxTime[0]}&endTime=${this.exlBoxTime[1]}`
        )
      },

      exlScanCodeImport() {
        this.exlScanCodeImportModal = true
        // if (!this.exlBoxTime.length) {
        //   this.$Message.warning('请先选择时间！')
        //   return false
        // }

        // let params = {
        //   buildingId: this.$dt.buildInfo().housesId,
        //   userId: this.$dt.userInfo().userId,
        //   startTime: this.exlBoxTime[0],
        //   endTime: this.exlBoxTime[1]
        // }
        // homeMgr
        //   .downLoadScanCode(params)
        //   .then((res) => {})
        //   .catch((err) => {})
      },
      // 首页数据初始化
      homeDataInit() {
        let checkParams = {
          startTime: this.chooseTime.startTime,
          endTime: this.chooseTime.endTime,
          checkIndex: this.checkIndex,
          orgId: this.$dt.buildInfo().housesId,
          level: 4
        }
        //关联线索提示
        this.$nextTick(function () {
          // 广告位
          this.$refs.advPage && this.$refs.advPage.getAdvListByOnShelf()
          // 案场首页待办
          this.$refs.homeTask && this.$refs.homeTask.getTaskHeadInfoForWeb()
          // 来人 线索
          this.getCustomerStatisticsFun()
          // 销售统计
          this.$refs.saleStatistics && this.$refs.saleStatistics.getSalesData(checkParams)
          //渠道统计
          this.$refs.channelStatistics && this.$refs.channelStatistics.init(checkParams)
          //销控统计
          this.$refs.controlStatistics && this.$refs.controlStatistics.init(checkParams)
          // 案场评级
          this.listGrade()
        })
      },

      // 来人，线索
      getCustomerStatisticsFun() {
        let params = {
          orgId: this.$dt.buildInfo().housesId,
          level: 4,
          startTime: this.chooseTime.startTime,
          endTime: this.chooseTime.endTime,
          jointIds: true
        }
        let checkParams = {
          startTime: this.chooseTime.startTime,
          endTime: this.chooseTime.endTime,
          checkIndex: this.checkIndex,
          orgId: this.$dt.buildInfo().housesId,
          level: 4
        }

        dailyApi.customerStatistics({ ...params }).then((res) => {
          // 来人统计
          let resultObj = {
            customer: { ...res }
          }
          this.$refs.visitorPage && this.$refs.visitorPage.dataInit(checkParams, this.dataText, resultObj)
          // 线索统计
          this.$refs.cluePage && this.$refs.cluePage.dataInit(checkParams, this.dataText, resultObj)
        })
      },
      // 切换日期
      dateChooseClick(checkIndex, chooseTime, dataText) {
        this.checkIndex = checkIndex
        this.dataText = dataText
        this.chooseTime = chooseTime
        this.homeDataInit()
      },
      onAuthTT() {
        this.$refs.authTT.show()
      }
    },
    created() {
      console.log(111)
    },
    mounted() {
      this.$refs.dateSearch.initDateFun(1)
      this.columns = taskColumn.headers(this)
      this.$refs.table && this.$refs.table.init(this)
      this.$refs.table && this.$refs.table.fetch()
    }
  }
</script>
<style lang="scss" scoped>
  .home {
    overflow-y: auto;
    font-size: 16px;
    background-color: #f0f2f5;

    ::v-deep .ivu-tooltip-content {
      width: 350px;
    }

    .container {
      position: relative;
      overflow: hidden;
      margin: 1.2%;
      .title {
        padding-left: 8px;
        color: #222;
        font-size: 18px;
        border-left: 2px solid #2298ff;
        font-weight: bolder;
      }

      .tab-top {
        position: absolute;
        width: 100%;
        background-color: #fff;
        z-index: 100;
        border-bottom: 1px solid #ccc;
      }

      .case-warp {
        padding-top: 50px;
        height: calc(100vh - 70px);
        overflow-y: auto;
      }

      .case-content {
        margin-top: 1.2%;
      }

      .daily_btn {
        margin-top: 1.2%;
        display: flex;
        justify-content: space-between;
        background-color: #fff;

        // padding: 20px 15px;
        height: 74px;
        line-height: 32px;
        overflow: hidden;
        .dailyDate {
          line-height: 74px;
          padding-left: 15px;
        }

        .caseLevel {
          position: relative;
          width: 582px;
          height: 74px;
          display: flex;
          flex-direction: row-reverse;
          .caseLevelBg {
            display: inline-block;
            width: 130px;
            height: 49px;
            z-index: 44;

            vertical-align: -8px;
            margin-top: 12px;
          }
          .levelSer {
            cursor: pointer;
            height: 32px;
            padding: 0 26px 0 20px;
            font-size: 14px;
            position: relative;
            margin-left: 23px;
            margin-top: 21px;
            margin-right: 20px;
            z-index: 45;

            &::before {
              content: '';
              width: 14px;
              height: 14px;
              position: absolute;
              right: 5px;
              top: 9px;
              border-radius: 50%;
            }
            &::after {
              content: '';
              width: 6px;
              height: 6px;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff;
              transform: rotate(45deg);
              position: absolute;
              right: 10px;
              top: 13px;
            }
          }
        }
        .caseLevelA {
          background: url('https://static.tospurfang.com/dt-management/caseRate/Abg.png');
          .caseLevelBg {
            background: url('https://static.tospurfang.com/dt-management/caseRate/ALevel1.png') no-repeat;
            background-size: 100% 100%;
          }
          .levelSer {
            color: rgba(112, 71, 10, 1);
            border-left: rgba(247, 191, 125, 1) 2px solid;
            &::before {
              background: rgba(112, 71, 10, 1);
            }
          }
        }
        .caseLevelB {
          background: url('https://static.tospurfang.com/dt-management/caseRate/Bbg.png');
          .caseLevelBg {
            background: url('https://static.tospurfang.com/dt-management/caseRate/BLevel1.png') no-repeat;
            background-size: 100% 100%;
          }
          .levelSer {
            color: rgba(27, 34, 62, 1);
            border-left: rgba(162, 173, 206, 1) 2px solid;
            &::before {
              background: rgba(27, 34, 62, 1);
            }
          }
        }
        .caseLevelC {
          background: url('https://static.tospurfang.com/dt-management/caseRate/Cbg.png');
          .caseLevelBg {
            background: url('https://static.tospurfang.com/dt-management/caseRate/CLevel1.png') no-repeat;
            background-size: 100% 100%;
          }
          .levelSer {
            color: rgba(129, 44, 1, 1);
            border-left: rgba(243, 191, 165, 1) 2px solid;
            &::before {
              background: rgba(129, 44, 1, 1);
            }
          }
        }
        .caseLevelD {
          background: url('https://static.tospurfang.com/dt-management/caseRate/Dbg.png');
          .caseLevelBg {
            background: url('https://static.tospurfang.com/dt-management/caseRate/DLevel1.png') no-repeat;
            background-size: 100% 100%;
          }
          .levelSer {
            color: rgba(33, 34, 38, 1);
            border-left: rgba(181, 183, 186, 1) 2px solid;
            &::before {
              background: rgba(33, 34, 38, 1);
            }
          }
        }
        .caseLevelW {
          background: url('https://static.tospurfang.com/dt-management/caseRate/Dbg.png');
          .caseLevelBg {
            background: url('https://static.tospurfang.com/dt-management/caseRate/wuLevel1.png') no-repeat;
            background-size: 100% 100%;
          }
          .levelSer {
            color: rgba(33, 34, 38, 1);
            border-left: rgba(181, 183, 186, 1) 2px solid;
            &::before {
              background: rgba(33, 34, 38, 1);
            }
          }
        }
      }

      .case-survey {
        margin-top: 1.2%;

        .tips {
          padding: 5px 10px;
          font-size: 14px;
          background: #fefcee;
          border-radius: 5px;

          .ivu-icon {
            margin-right: 10px;
            color: #2298ff;
            font-size: 18px;
          }

          .link-btn {
            margin-left: 10px;
            cursor: pointer;
            color: #2298ff;
          }
        }
      }

      .sop-task {
        margin-top: 1.2%;
        padding: 20px 15px;
        background-color: #fff;
        border-radius: 5px;

        .tips {
          font-size: 12px;
          margin: 10px 0;
          background-color: #fffbe6;
          width: 30%;
          border-radius: 5px;

          p {
            font-size: 14px;
            line-height: 32px;
          }
        }

        .sop-tab {
          margin-top: 15px;

          ::v-deep .ivu-tabs-nav .ivu-tabs-tab-active {
            font-weight: 600;
            color: #0088ff;
            border-bottom: 3px solid #0088ff;
          }

          ::v-deep .ivu-tabs-nav .ivu-tabs-tab:hover {
            color: #0088ff;
          }

          ::v-deep .ivu-tabs-bar {
            margin-bottom: 0;
          }
        }
      }
    }

    .home-img {
      width: 600px;
      left: 50%;
      top: 120px;
      transform: translateX(-50%);
    }

    .alarm {
      color: #ed5134;
    }
  }
</style>
